<template>
	<view class="">
		<w-navbar title="采购" titleColor="black" backgroundColor="white"></w-navbar>
		<w-container>
			<template>
				<view class="top_box">
					<search></search>
					<choose-date></choose-date>
					<u-tabs :list="tab_list" @change="tabChange" :lineColor="PUBLIC_STYLE.color" :activeStyle="{'color':PUBLIC_STYLE.color}"></u-tabs>
				</view>
				<view class="content">
					<view class="oder_card" v-for="(item,index) in 2" :key="index">
						<view class="order_number_box fr-ac pb-20" style="">
							<view class="">
								订单号：123123123123
							</view>
							<view class="iconfont icon-fuzhi1 ml-20"></view>
							<view class="date">
								2024-05-01
							</view>
						</view>
						<view class="mb-30" v-for="(item2,index2) in 2" :key="index2">
							<view class="mt-20 mb-20">
								111
							</view>
							<view class="fr-ac">
								<image :src="ossURL + item2.image" mode=""></image>
								<view class="ml-20 fc-jsb" style="height: 100rpx;flex: 1;">
									<view class="">
										222
									</view>
									<view class="fr-ac-jsb">
										<view class="">
											<text>数量：</text>
											<text>111</text>
										</view>
										<view class="">
											￥199
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="remarks_box">
							<view class="remarks_item">
								<view class="">
									供货商名称
								</view>
								<view class="">
									13514019915
								</view>
							</view>
							<view class="remarks_item">
								<view class="">
									备注：xxxxxxxxxxxxxxxx
								</view>
							</view>
							<view class="remarks_item">
								<view class="">
									白冰冰
								</view>
								<view class="">
									13514019915
								</view>
								<view class="">
									大数据恢复卡的回复可见
								</view>
								<view class="iconfont icon-fuzhi1"></view>
							</view>
						</view>
						<view class="fr-ac-jsb mt-30">
							<view class="oder_more">
								更多
							</view>
							<view class="fr-ac-jsb">
								<view class="oder_btn mr-30">
									仓库发货
								</view>
								<view class="oder_fill_btn">
									发货
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</w-container>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_list:[
					{
						name: '全部',
						value: 0
					},
					{
						name: '待处理',
						value: 1
					},
					{
						name: '已处理',
						value: 2
					},
					{
						name: '待发货',
						value: 3
					},
					{
						name: '已发货',
						value: 4
					},
					{
						name: '已取消',
						value: 5
					},
				]
			}
		},
		watch: {
		
		},
		onLoad() {
		
		},
		onShow() {
		},
		methods: {
			tabChange(item){
				console.log('item', item);
			}
		}
			
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: rgb(250,250,252);
	}
	
	.top_box{
		width: 100%;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 999;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		background-color: white;
	}
	
	.oder_card{
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		image{
			min-width: 100rpx;
			min-height: 100rpx;
			width: 100rpx;
			height: 100rpx;
		}
		
		text{
			color: #999;
		}
		
		view,text{
			font-size: 26rpx;
		}
		
		.order_number_box{
			border-bottom: 2rpx solid #eee;
			
			.date{
				color: #999;
				margin-left: auto;
			}
			
		}
		
		.remarks_box{
			box-sizing: border-box;
			padding: 0 20rpx;
			background-color: rgb(239,239,239);
			
			.remarks_item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 14rpx 0;
				border-bottom: 1rpx solid rgb(230,230,230);
				color: #888;
			}
			.remarks_item:nth-last-child(1){
				border: none;
			}
		}
		
		.oder_more{
			color: #888;
		}
		
		.oder_fill_btn,.oder_btn{
			padding: 10rpx 30rpx;
			border-radius: 6rpx;
		}
		
		.oder_btn{
			background-color: white;
			border: 2rpx solid $theme-color;
			color: $theme-color;
		}
		
		.oder_fill_btn{
			background-color: $theme-color;
			border: 2rpx solid $theme-color;
			color: white;
		}
	}
</style>